<template>

  <div class="Course">
    <div class="head">
      <div class="search">
        <el-button type="primary" icon="el-icon-plus"  style="float: left;margin: 12px 2px; height: 100%" @click="$router.push('/editPaper')">添加考试</el-button>
        <div class="btnSearch">
          <el-button type="primary" icon="el-icon-search"  @click="setValue(index,key)">
            搜索
          </el-button>
        </div>
        <el-input placeholder="请输入内容"  v-model="key" ></el-input>
      </div>
    </div>
    <div class="CourseTable">
      <el-table
          :data="tableData"
          :header-cell-style="{textAlign:'center',background:'#00ffeb'}"
          :cell-style="{textAlign:'center'}"
          :stripe="true"
          style="width: 1160px;margin: auto">
        <el-table-column
            prop="testId"
            label="试卷ID"
            width="120">
        </el-table-column>
        <el-table-column
            prop="classId"
            label="课程ID"
            width="120">
        </el-table-column>
        <el-table-column
            prop="className"
            label="课程名称"
            width="240">
        </el-table-column>
        <el-table-column
            prop="testName"
            label="试卷名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="time"
            label="限时(min)"
            width="120">
        </el-table-column>
        <el-table-column
            label="操作"
            width="440">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"
                       @click="$router.push(
                           {name:'EditTestPaper',
                           query:{
                             testId:scope.row.testId,
                             testName:scope.row.testName,
                             classId:scope.row.classId,
                             testFile:scope.row.testFile,
                             time:scope.row.time
                           }})" >修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteTest(scope.row.testId)">删除</el-button>
            <el-button type="primary" style="margin-right: 5px" @click="putStu(scope.row.testId)" >发布</el-button>
            <span v-if="scope.row.type===1" style="margin-left: 10px ;color: red">已发布</span>
            <span v-else style="margin-left: 10px;color: red">未发布</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-divider ></el-divider>
      <div style="height:0;display: flex; margin: auto">
        <el-pagination
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total"
            :current-page="index"
            @current-change="(index)=> setValue(index,this,key)"
            style="margin: 0 auto"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Test",
  data(){
    return{
      tableData:[],
      index:1,
      total:1,
      key:'',
    }
  },
  methods:{
    setValue(index,key){
      this.$axios.post('/getTestMessage',{
        index:index,
        key:key,
      }).then(resp=>{
        this.tableData=resp.data;
      });
      this.$axios.post('/countTestMessage',{
        key:key
      }).then(resp=>{
        this.total=resp.data;
      });
    },
    putStu(id){
      this.$axios.post('/putStu',{testId:id})
          .then(()=>{
            this.$message({
                type:'success',
                message:'发布成功'
              });
            this.setValue(this.index,this.key);
          })
    },
    deleteTest(inex){
      this.$confirm('是否删除？', '确认信息', {
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then(() => {
        this.$axios.post('/delTest',{
          id:inex
        }).then(resp=> {
              console.log(resp.data)
              if(resp.data===200) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              }
              else {
                this.$message({
                  type: 'error',
                  message: '删除失败'
                });
              }
              this.setValue(this.index,this.key);
        })
      }).catch(() => {})
    },
  },
  mounted() {
    this.setValue(1,'')
  }

}
</script>

<style scoped>
.Course{
  background-color: white;
  width: 98%;
  margin: auto;
  display: block;
  height: 99%;
}
.CourseTable{
  width: 1200px;
  height: 700px;
  margin: 2px auto auto;
}
.head{
  height: 75px;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
  margin-top: 5px;
}
.btnSearch{
  display: flex;
  float: right;
  margin: 12px;
}
.el-input {
  width: 200px;
  border: 1px solid #00aeff;
  border-radius: 12px;
  display: flex;
  margin: 12px;
  float: right;
}
.el-input__inner{
  border-radius: 12px;
}

</style>
